<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- <button @click="btn">点击</button> -->
        <el-tab-pane label="循环播报" name="first">
          <h1 class="title">循环广播计划表</h1>
          <!-- 新增 -->
          <el-button type="success" @click="addEdit">播放计划</el-button>
          <el-table :data="sipTable" border style="width: 100%">
            <el-table-column prop="call_name" label="接收地" width="120">
            </el-table-column>
            <el-table-column prop="content" label="播报内容">
              <template slot-scope="props">
                <el-popover
                  placement="top-start"
                  title="播报内容"
                  width="200"
                  trigger="hover"
                  :content="props.row.content"
                >
                  <div slot="reference">
                    {{ props.row.content.slice(0, 20) }}
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="开始时间" width="140">
              <template slot-scope="scope">
                {{
                  $moment(scope.row.start_time * 1000).format(
                    "YYYY-MM-DD/HH:mm"
                  )
                }}
              </template>
            </el-table-column>

            <el-table-column label="结束时间" width="140">
              <template slot-scope="scope">
                {{
                  scope.row.end_time === 0?"0":$moment(scope.row.end_time * 1000).format("YYYY-MM-DD/HH:mm")
                }}
              </template>
            </el-table-column>

            <!-- <el-table-column label="播报间隔" width="120">
          <template slot-scope="scope">
            {{ scope.row.broadcast_interval + "秒" }}
          </template>
        </el-table-column> -->

            <!-- <el-table-column prop="broadcast_mode" label="播报模式" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.broadcast_mode === 1">单次</span>
            <span v-if="scope.row.broadcast_mode === 2">循环</span>
            <span v-if="scope.row.broadcast_mode === 3">永久</span>
          </template>
        </el-table-column> -->
            <el-table-column prop="" label="广播状态" width="120">
              <template slot-scope="scope">
                <span
                  class="el-icon-success"
                  style="color: #13ce66"
                  v-if="scope.row.status === 0"
                ></span>
                <span
                  class="el-icon-warning"
                  style="color: #fbdc3c"
                  v-if="scope.row.status === 1"
                ></span>
                <span
                  class="el-icon-circle-close"
                  style="color: #ff4949"
                  v-if="scope.row.status === 2"
                ></span>
                <span>
                  {{
                    scope.row.status === 0
                      ? "未播放"
                      : scope.row.status === 1
                      ? "已播放"
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="sendDialog(scope.row)" size="mini"
              >发送</el-button
            > -->
                <el-button @click="sipStop(scope.row)" size="mini">{{
                  scope.row.stop === 0 ? "停止" : "启动"
                }}</el-button>
                <!-- <el-button @click="edit(scope.row)" size="mini">编辑</el-button> -->
                <el-button @click="del(scope.row)" size="mini" type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            layout="prev, pager, next"
            :page-count="paging.total"
            @current-change="page_change"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="定时播报" name="second">
          <h1 class="title">定时广播计划表</h1>
          <!-- 新增 -->
          <el-button type="success" @click="addEdit">播放计划</el-button>
          <el-table :data="sipTable" border style="width: 100%">
            <el-table-column prop="call_name" label="接收地" width="120">
            </el-table-column>
            <el-table-column prop="content" label="播报内容">
              <template slot-scope="props">
                <el-popover
                  placement="top-start"
                  title="播报内容"
                  width="200"
                  trigger="hover"
                  :content="props.row.content"
                >
                  <div slot="reference">
                    {{ props.row.content.slice(0, 20) }}
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="开始时间" width="140">
              <template slot-scope="scope">
                {{
                  $moment(scope.row.start_time * 1000).format(
                    "YYYY-MM-DD/HH:mm"
                  )
                }}
              </template>
            </el-table-column>

            <el-table-column label="结束时间" width="140">
              <template slot-scope="scope">
                {{
                  $moment(scope.row.end_time * 1000).format("YYYY-MM-DD/HH:mm")
                }}
              </template>
            </el-table-column>

            <!-- <el-table-column label="播报间隔" width="120">
          <template slot-scope="scope">
            {{ scope.row.broadcast_interval + "秒" }}
          </template>
        </el-table-column> -->

            <!-- <el-table-column prop="broadcast_mode" label="播报模式" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.broadcast_mode === 1">单次</span>
            <span v-if="scope.row.broadcast_mode === 2">循环</span>
            <span v-if="scope.row.broadcast_mode === 3">永久</span>
          </template>
        </el-table-column> -->
            <el-table-column prop="" label="广播状态" width="120">
              <template slot-scope="scope">
                <span
                  class="el-icon-success"
                  style="color: #13ce66"
                  v-if="scope.row.status === 0"
                ></span>
                <span
                  class="el-icon-warning"
                  style="color: #fbdc3c"
                  v-if="scope.row.status === 1"
                ></span>
                <span
                  class="el-icon-circle-close"
                  style="color: #ff4949"
                  v-if="scope.row.status === 2"
                ></span>
                <span>
                  {{
                    scope.row.status === 0
                      ? "未播放"
                      : scope.row.status === 1
                      ? "已播放"
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="sendDialog(scope.row)" size="mini"
              >发送</el-button
            > -->
                <!-- <el-button @click="sipStop(scope.row)" size="mini">{{
                  scope.row.stop === 0 ? "停止" : "启动"
                }}</el-button> -->
                <!-- <el-button @click="edit(scope.row)" size="mini">编辑</el-button> -->
                <el-button @click="del(scope.row)" size="mini" type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            layout="prev, pager, next"
            :page-count="paging.total"
            @current-change="page_change"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="sip发送" :visible.sync="dialogVisible" width="80%" center>
      <Sipdialog />
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button> -->
      </span>
    </el-dialog>
    <!-- 新增和编辑 -->
    <SipdialogAddEdit
      :AddEditdialogVisible="AddEditdialogVisible"
      @close="AddEditdialogVisible = false"
      :data="activeName"
      @tableUpate="tableUpate"
    />
  </div>
</template>

<script>
import {
  getSipData,
  getTimingTable,
  sipDelete,
  sipUpdate,
  sipStaus,
  ajaxInitiator,
  sipLoopSend,
  siptimingSend,
} from "@/api/sip";
import Sipdialog from "../table/sipdialog/index.vue";
import SipdialogAddEdit from "../table/sipdialogAddEdit/index.vue";
import { Message } from "element-ui";
import { getcheck } from "../encapsulation";
export default {
  components: {
    Sipdialog,
    SipdialogAddEdit,
  },
  data() {
    return {
      //新增和编辑布尔值
      AddEditdialogVisible: false,
      // 发送对话框布尔值
      dialogVisible: false,
      // sip数据表格
      sipTable: [],
      // 编辑数据
      editData: {},
      // 分页
      paging: {
        pag: 1,
        limit: 10,
        total: 100,
      },
      activeName: "second",
      ajaxInitiatorName: [],
    };
  },
  created() {
    this.sipInit(1, "second");
  },
  methods: {
    async btn() {
      let data = {
        sip_ip: "192.168.8.162",
        sip_port: "5060",
        user_id: "1000",
        password: "Xh8~ZX*h1",
        call_id: "1001@1002",
        content:
          "亲爱的听众朋友们，现在是下午三点整，希望温暖的阳光能够陪伴您度过一段美好的时光，我们稍后将继续播放，请您保持收听，敬请期待。",
        start_time: "1734686220",
        end_time: "1734686280",
      };
      let res = await sipLoopSend(data);
    },
    async sipInit(page, activeName) {
      let name = JSON.parse(localStorage.getItem("HSKJ-username"))
      //循环播报
      if (activeName === "first") {
        const res = await getSipData({ pag: page || 1 });
        const ajaxInitiatorData = await ajaxInitiator({userChanne:name});
        this.sipTable = res.data.data.rows;
        this.paging.total = res.data.data.total;
        this.ajaxInitiatorName = ajaxInitiatorData.data.meta.data;
      }
      if (activeName === "second") {
        const res = await getTimingTable({ pag: page || 1 });
        const ajaxInitiatorData = await ajaxInitiator({userChanne:name});
        this.sipTable = res.data.data.rows;
        this.paging.total = res.data.data.total;
        this.ajaxInitiatorName = ajaxInitiatorData.data.meta.data;
      }

      //循环匹配发起地
      this.sipTable.forEach((item) => {
        this.ajaxInitiatorName.forEach((elemnt) => {
          if (Number(item.call_id) === elemnt.Initiator_id) {
            item.call_name = elemnt.Initiator_name;
          }
        });
      });
    },
    // 编辑
    edit(data) {
      this.editData = data;
      this.AddEditdialogVisible = true;
    },
    // 发送对话框
    sendDialog() {
      this.dialogVisible = true;
    },
    addEdit() {
      // 清空数据
      this.editData = {};
      this.AddEditdialogVisible = true;
    },
    async del(data) {
      await sipDelete({ id: String(data.id),activeName:this.activeName});
      Message.success("删除成功");
      this.sipInit(1,this.activeName);
    },
    async sipStop(data) {
      // 深层拷贝防止修改原来的值
      let res;
      let ajaxData = Object.assign({}, data);

      // 停止请求需要处理成字符串
      for (let key in ajaxData) {
        ajaxData[key] = String(ajaxData[key]);
      }
      // 停止sip变开始sip
      if (data.stop === 1) {
        ajaxData.stop = "0";
      }
      // 开始sip变成停止
      if (data.stop === 0) {
        ajaxData.stop = "1";
      }
      // 发送请求
      res = await sipUpdate(ajaxData);
      if (res.status === 200) {
        // 停止sip变开始sip
        if (data.stop === 1) {
          Message.success("启动成功");
        }
        // 开始sip变成停止
        if (data.stop === 0) {
          Message.success("停止成功");
        }
        // this.sipInit();
        // 检测sip状态
        getcheck();
        // 检测sip状态完刷新列表
        this.sipInit();
      }
    },
    // 新增和更新关闭对话框和刷新页面
    tableUpate() {
      this.sipInit(1,this.activeName);
      this.AddEditdialogVisible = false;
    },
    // 切换分页
    page_change(page) {
      this.sipInit(page);
    },
    handleClick(tab, event) {
      this.sipInit(1, this.activeName);
    },
  },
};
</script>

<style>
.title {
  text-align: center;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
